<template>
  <Main :type="'form'">
    <Title :title="pageName" />

    <el-row>
      <el-col :span="24">
        <el-form ref="form" label-width="150px" :model="form" :rules="form">
          <el-form-item
            label="联系人"
            prop="name"
            :rules="{
              required: true,
              message: '请输入联系人名称',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.name"
              class="form-input"
              size="medium"
              placeholder="请输入联系人名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系电话"
            prop="phone"
            :rules="{
              required: true,
              message: '请输入联系电话',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.phone"
              class="form-input"
              size="medium"
              :maxlength="11"
              onkeyup='value=value.replace(/\D/g,"")'
              onpaste='value=value.replace(/\D/g,"")'
              oncontextmenu='value=value.replace(/\D/g,"")'
              placeholder="请输入联系电话"
              @change="inputTagPhone"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地区"
            prop="position"
            :rules="{ required: true, message: '请选择地区', trigger: 'blur' }"
          >
            <el-cascader
              v-model="form.position"
              :options="options"
              :props="defaultProps"
              class="form-input"
              change-on-select
              @change="cascaderTag"
            ></el-cascader>
          </el-form-item>

          <el-form-item
            label="详细地址"
            prop="address"
            :rules="{
              required: true,
              message: '请输入详细地址',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.address"
              placeholder="请输入内容"
              style="width:50%;"
              size="medium"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchTag"
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item
            label="选取地址"
            prop="longitude"
            :rules="{ required: true, message: '请选取地址', trigger: 'blur' }"
          >
            <GDmap
              :type="'Marker'"
              style="margin-top:20px;"
              :datas="{ search: searchs }"
              @retunrData="retunrData"
            />
          </el-form-item>
          <el-form-item label="邮政编码">
            <el-input
              v-model="form.postal_code"
              class="form-input inputs"
              onkeyup='value=value.replace(/\D/g,"")'
              onpaste='value=value.replace(/\D/g,"")'
              oncontextmenu='value=value.replace(/\D/g,"")'
              :maxlength="10"
              placeholder="请输入邮政编码"
              @change="inputTagPcode"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-checkbox v-model='form.is_default_send'>设为默认发货地址</el-checkbox> -->
            <el-checkbox v-model="form.is_default_recieve"
              >设为默认退货地址</el-checkbox
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <Footer>
      <el-button plain @click="$emit('out')">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </Footer>
  </Main>
</template>
<script>
import { SETADDRESSDEPOT } from "../service";
import { THREELEVELLINKAGE } from "@/service/public";
export default {
  components: {
    GDmap: () => import("publicCom/GDmap")
  },
  props: {
    addressMsg: {
      default: () => {},
      type: Object
    }
  },
  data() {
    return {
      pageName: "新建地址库",
      form: {
        name: "",
        phone: "",
        position: [],
        postal_code: "",
        longitude: "",
        latitude: "",
        is_default_send: false,
        is_default_recieve: false,
        city: "",
        area: "",
        province: "",
        positions: "",
        address: "",
        address_id: ""
      },
      searchs: "",
      addressJson: {},
      options: [],
      defaultProps: {
        value: "id",
        children: "children",
        label: "name"
      }
    };
  },
  created() {
    let json = JSON.stringify(this.addressMsg);
    if (json !== "{}") {
      this.pageName = "编辑地址库";
      this.form.name = this.addressMsg.name;
      this.form.phone = JSON.parse(this.addressMsg.phone);
      this.form.postal_code = JSON.parse(this.addressMsg.postal_code);
      this.form.longitude = this.addressMsg.latitude;
      this.form.latitude = this.addressMsg.latitude;
      this.form.is_default_send = this.addressMsg.is_default_send === 1;
      this.form.is_default_recieve = this.addressMsg.is_default_recieve === 1;
      this.form.position[0] = this.addressMsg.province;
      this.form.position[1] = this.addressMsg.city;
      this.form.position[2] = this.addressMsg.area;
      this.form.positions = this.addressMsg.position;
      this.form.address = this.addressMsg.address;
      this.searchs = this.addressMsg.address;
      this.address_id = this.addressMsg.address_id;
    } else {
      this.pageName = "新建地址库";
    }
    this.getAddress();
  },
  methods: {
    async getAddress(obj) {
      await THREELEVELLINKAGE(obj).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.options = data;
          if (this.pageName === "编辑地址库") {
            this.cascaderTag(this.form.position, "edit");
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    cascaderTag(e, type) {
      let oneName, twoName, threeName;
      if (e[0]) {
        this.options.forEach(ele => {
          if (ele.id === e[0]) {
            oneName = ele.name;
          }
          if (e[1]) {
            ele.children.forEach(eles => {
              if (eles.id === e[1]) {
                twoName = eles.name;
              }
              if (e[2]) {
                eles.children.forEach(eless => {
                  if (eless.id === e[2]) {
                    threeName = eless.name;
                  }
                });
              }
            });
          }
        });
      }

      this.addressJson = { oneName, twoName, threeName };
      this.searchs = "";
      if (type === "edit") {
        this.searchTag();
      } else {
        this.form.address = "";
      }
    },
    searchTag() {
      this.form.longitude = "";
      this.form.latitude = "";
      this.addressJson.oneName
        ? (this.searchs = this.addressJson.oneName)
        : this.$message.error("选择地区后才可搜索");
      if (this.addressJson.twoName) this.searchs += this.addressJson.twoName;
      if (this.addressJson.threeName)
        this.searchs += this.addressJson.threeName;
      this.form.positions = this.searchs;
      this.searchs += this.form.address;
    },
    retunrData(e) {
      if (e) {
        // this.form.address = e.address;
        this.form.longitude = e.lng;
        this.form.latitude = e.lat;
      }
    },
    inputTagPhone(e) {
      this.form.phone = e;
    },
    inputTagPcode(e) {
      this.form.postal_code = e;
    },
    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          SETADDRESSDEPOT({
            flag: "save",
            name: this.form.name,
            phone: this.form.phone,
            postal_code: this.form.postal_code,
            longitude: this.form.longitude,
            latitude: this.form.latitude,
            is_default_send: this.form.is_default_send ? 1 : 0,
            is_default_recieve: this.form.is_default_recieve ? 1 : 0,
            province: this.form.position[0],
            city: this.form.position[1],
            area: this.form.position[2],
            position: this.form.positions,
            address: this.form.address,
            address_id: this.address_id
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.$emit("out");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    }
  }
};
</script>
